<div class="charts remnant">
    {% load static %}
    {% load chart_extras %}


    {% if charts_type and charts_type == "per_area" %}

       <div class="row section">

         <div class="col-lg-12">
            <h3 class="title">Vacantes e inscripciones de ofertas nacionales</h3>
         </div>
          <div class="col-lg-6">
            <img src='/chart/plot/job/available_offers?q=filter-nationality-nacional&groupby=area&operator=sum&aggregation=vacancies'
              width="700px" height="auto"/>
          </div>
           <div class="col-lg-6">
                <img src='/chart/plot/job/available_offers?q=filter-nationality-internacional&operator=sum&groupby=area&aggregation=registered_people'
              width="700px" height="auto"/>
            </div>
        </div>

         <div class="row section">
        <div class="col-lg-12">
            <h3 class="title">Vacantes e inscripciones de ofertas totales</h3>
        </div>
          <div class="col-lg-6">
              <img src='/chart/plot/job/available_offers?compareby=nationality&groupby=area&groupby=nationality&operator=sum&aggregation=vacancies'
                  width="700px" height="auto"/>
        </div>
             <div class="col-lg-6">
              <img src='/chart/plot/job/available_offers?compareby=nationality&groupby=area&groupby=nationality&operator=sum&aggregation=registered_people'
                  width="700px" height="auto"/>
          </div>

    </div>


     <div class="row section">
         <div class="col-lg-12">
            <h3 class="title">Vacantes e inscripciones de ofertas nacionales e internacionales</h3>
         </div>

         <div class="col-lg-6">

            <img src='/chart/plot/job/available_offers?q=filter-nationality-nacional&groupby=area&operator=sum&aggregation=vacancies&operator=sum&aggregation=registered_people'
                  width="700px" height="auto"/>
         </div>

          <div class="col-lg-6">
            <img src='/chart/plot/job/available_offers?q=filter-nationality-internacional&groupby=area&operator=sum&aggregation=vacancies&operator=sum&aggregation=registered_people'
                  width="700px" height="auto"/>
        </div>
    </div>


     <div class="row section">
         <div class="col-lg-12">
            <h3 class="title">Vacantes e inscripciones de ofertas nacionales</h3>
         </div>
          <div class="col-lg-6">
            <img src='/chart/plot/job/available_offers?q=filter-nationality-nacional&groupby=area&operator=sum&aggregation=vacancies'
              width="700px" height="auto"/>
          </div>
            <div class="col-lg-6">
                <img src='/chart/plot/job/available_offers?q=filter-nationality-nacional&groupby=area&operator=sum&aggregation=registered_people'
              width="700px" height="auto"/>
            </div>
    </div>


    <div class="row section">
         <div class="col-lg-12">
            <h3 class="title">Vacantes e inscripciones de ofertas internacionales</h3>
         </div>
            <div class="col-lg-6">
                <img src='/chart/plot/job/available_offers?q=filter-nationality-internacional&groupby=area&operator=sum&aggregation=vacancies'
              width="700px" height="auto"/>
            </div>
             <div class="col-lg-6">
                <img src='/chart/plot/job/available_offers?q=filter-nationality-internacional&groupby=area&operator=sum&aggregation=registered_people'
              width="700px" height="auto"/>
            </div>
    </div>

    {% elif  charts_type and charts_type == "per_province" %}

    <div class="row section">
         <div class="col-lg-12">
             <h3 class="title">Vacantes e inscripciones de ofertas</h3>
          </div>
      <div class="col-lg-6">
          <img src='/chart/plot/job/available_offers__in_provinces?q=filter-nationality-nacional&groupby=province&operator=sum&aggregation=vacancies'
              width="900px" height="auto"/>
      </div>

      <div class="col-lg-6">
          <img src='/chart/plot/job/available_offers__in_provinces?q=filter-nationality-nacional&groupby=province&operator=sum&aggregation=registered_people'
              width="900px" height="auto"/>
      </div>

    </div>


    {% elif  charts_type and charts_type == "per_company" %}
    <div class="row section">
         <div class="col-lg-12">
            <h3 class="title">Compañías con más ofertas de empleo</h3>
         </div>
        <div class="col-lg-6">
            <img src='/chart/plot/job/available_offers__in_companies?q=filter-nationality-nacional&groupby=company&operator=sum&aggregation=vacancies'
              width="700px" height="auto"/>
        </div>
        <div class="col-lg-6">
          <img src='/chart/plot/job/available_offers__in_companies?q=filter-nationality-internacional&groupby=company&operator=sum&aggregation=vacancies'
              width="700px" height="auto"/>
      </div>
    </div>

    {% elif  charts_type and charts_type == "salaries_per_area" %}

    <div class="row section">
         <div class="col-lg-12">
            <h3 class="title">Salarios brutos anuales por área</h3>
         </div>
       <div class="col-lg-6">
          <img src='/chart/plot/job/available_offers__get_mean_salary?q=filter-nationality-nacional&groupby=area&operator=avg&aggregation=mean_salary'
              width="700px" height="auto"/>
      </div>
      <div class="col-lg-6">
          <img src='/chart/plot/job/available_offers__get_mean_salary?q=filter-nationality-internacional&groupby=area&operator=avg&aggregation=mean_salary'
              width="700px" height="auto"/>
      </div>
    </div>



     {% elif  charts_type and charts_type == "salaries_per_province" %}
    <div class="row section">
         <div class="col-lg-12">
            <h3 class="title">Salarios brutos anuales por provincia</h3>
         </div>
       <div class="col-lg-12">
          <img src='/chart/plot/job/available_offers__in_provinces__get_mean_salary?q=filter-nationality-nacional&groupby=province&operator=avg&aggregation=mean_salary'
              width="1000px" height="auto"/><br>
      </div>
    </div>

    {% elif  charts_type and charts_type == "vacancies_historical" %}
    <div class="row section">
         <div class="col-lg-12">
            <h3 class="title">Vacantes creadas en los últimos años</h3>
             <div class="col-lg-12">
                <img src='/chart/plot/job/offers_historical?compareby=first_publication_date&q=filter-nationality-nacional&q=filter-first_publication_date-in_range&groupby=area&groupby=first_publication_date&operator=sum&aggregation=vacancies'
              width="1000px" height="auto"/><br>
        </div>
         </div>
    </div>

{% endif %}


{% comment %}
   <h3>Some charts examples</h3>
   <img src='/chart/vacancies-or-registered-people-per-area/vacancies/national' width="700px" /><br>
   <img src='{% url  view_name %}' width="700px" /><br>
   <img src='{{ url }}' width="700px" /><br>
{% endcomment %}

</div>